<template>
  <!-- 保存西药处方模板 -->
  <el-dialog title="新增西/成药处方模板" :visible="value" width="1024px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-form @submit.native.prevent="onSubmit" label-width="140px" ref="form" :model="form" :rules="rules">
      <el-form-item label="模板名称：" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="模板类型：" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio v-for="(item,index) in typeArr" :key="index" :label="item.id">{{item.desc}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="0px" prop="tableList">
        <table class="table-box">
          <thead>
            <tr>
              <th>组号</th>
              <!-- <th>药品名</th> -->
              <th>单次剂量</th>
              <th>用法</th>
              <th>用药频次</th>
              <th>天数</th>
              <th>总量</th>
              <th>取药</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in form.tableList" :key="index">
              <td>
                <div class="drug-title">
                  <el-link :underline="false" type="primary"> {{item.drugName}}</el-link>
                </div>
                <el-select v-model="item.groupId">
                  <el-option v-for="(item,index) in 10" :key="index" :value="item" :label="item"></el-option>
                </el-select>
              </td>
              <!-- <td>
                <el-link :underline="false" type="primary"> {{item.drugName}}</el-link>
              </td> -->
              <td>
                <el-input v-model.number="item.oneDose" type="number">
                  <!-- <el-select v-model="item.oneDoseUnit" style="width:70px;" slot="append" placeholder="请选择">
                    <el-option v-for="(item,index) in oneDoseUnitArr" :key="index" :label="item.desc" :value="item.id"></el-option>
                  </el-select> -->
                   <span slot="append">{{item.oneDoseUnit|changeAssist(oneDoseUnitArr)}}</span>
                </el-input>
              </td>
              <td>
                <el-select v-model="item.use" placeholder="请选择">
                  <el-option v-for="(item,index) in useArr" :key="index" :label="item.desc" :value="item.id"></el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="item.frequency" placeholder="请选择">
                  <el-option v-for="(item,index) in frequencyArr" :key="index" :label="item.desc" :value="item.id"></el-option>
                </el-select>
              </td>
              <td>
                <el-input v-model.number="item.useDay" type="number">
                </el-input>
              </td>
              <td>
                <el-input :value="item.useTotal">
                  <el-select v-model="item.totalUnit" slot="append" style="width:70px;" placeholder="请选择">
                    <el-option v-for="(item2,index2) in oneDoseUnitArr" :key="index2" v-show="showUnit(item2.id,item)" :label="item2.desc" :value="item2.id"></el-option>
                  </el-select>
                </el-input>
              </td>
              <td>
                <el-select v-model="item.getAddress" placeholder="请选择">
                  <el-option v-for="(item,index) in getAddressArr" :key="index" :label="item.desc" :value="item.id"></el-option>
                </el-select>
              </td>
              <td>
                <div style="width:120px;line-height:36px;">
                  <el-link :underline="false" @click="onOpenExplain(item)" type="primary"><i class="el-icon-edit"></i>说明</el-link>
                  &nbsp;&nbsp;&nbsp;
                  <el-link :underline="false" type="primary" @click="onDelItem(index)"><i class="el-icon-delete"></i></el-link>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form-item>
      <el-button v-show="false" type="primary" native-type="submit" :loading="btnLoading"></el-button>
    </el-form>
    <br>
    <div>
      <dialogSearchDrug :patientId="patientId" :doctorId="doctorId" @addItem="addFormList"></dialogSearchDrug>
    </div>
    <dialogCFExplain v-model="dialogExplain" :curItem="curItem"></dialogCFExplain>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import xyMixin from "../_js/xyMixin.js";
export default {
  mixins: [xyMixin],
  props: ["value", "list", "deptId", "doctorId", "patientId"],
  components: {
    dialogSearchDrug: () => import("./dialogSearchDrug.vue"),
    dialogCFExplain: () => import("./dialogCFExplain.vue")
  },
  data() {
    return {
      btnLoading: false,
      dialogExplain: false,
      curItem: null,
      form: {
        name: "",
        type: 0,
        tableList: []
      }, 
      rules: {
        name: [{ required: true, message: "此项必填", trigger: "blur" }]
      },
      typeArr: []
    };
  },
  mounted() {
    let th = this;
    th.form.hpId = th.adminUser.hpId;
    th.getCommonConfigByKey("模板类型").then(res => {
      th.typeArr = res;
    }); 
  },
  methods: {
    onSubmit() {
      let th = this;
      let j = {};
      if (th.form.tableList.length == 0) return;
      let fn = function() {
        th.btnLoading = true;
        th.$api.addWesternMedicineDrugTemplate(j).then(res => {
          if (res.executed) {
            th.$message.success("操作完成");
            th.onClose();
          } else {
            th.$message.error(res.message);
          }
          th.btnLoading = false;
        });
      };
      th.$refs["form"].validate(v => {
        if (v) {
          let westernMedicineDrugTemplate = {
            hpId: th.adminUser.hpId,
            name: th.form.name,
            type: th.form.type,
            refId: th.form.type == 0 ? th.deptId : th.doctorId
          };
          let westernMedicineDrugTemplateItem = [];
          th.form.tableList.forEach(item => {
            let json = {
              medicalAdviceId: item.drugId,
              timesDosage: item.oneDose,
              timesUnit: item.oneDoseUnit,
              usage: item.use,
              frequency: item.frequency,
              day: item.useDay,
              count: item.useTotal,
              unit: item.totalUnit,
              takeMedicinePlace: item.getAddress,
              groupNum: item.groupId,
              desc: item.remark,
              isDeleted: 0,
              adviceName: ""
            };
            westernMedicineDrugTemplateItem.push(json);
          });
          j.westernMedicineDrugTemplate = JSON.stringify(
            westernMedicineDrugTemplate
          );
          j.westernMedicineDrugTemplateItem = JSON.stringify(
            westernMedicineDrugTemplateItem
          );
          if (th.judgeGroup()) {
            fn();
          } else {
            th.$message.warning("同组号的药品必须用法、频次、天数保持一致");
          }
        }
      });
    },
    //删除项
    onDelItem(index) {
      let th = this;
      th.form.tableList.splice(index, 1);
    },
    onOpen() {
      let th = this;
      th.$nextTick(function() {
        th.list.forEach(item => {
          let j = {};
          Object.assign(j, item);
          th.form.tableList.push(j);
        });
      });
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  },
  watch: {
    "form.tableList": {
      deep: true,
      handler: function(n) {
        let th = this;
        th.calculateTotal();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.table-box {
  td {
    height: 80px;
    vertical-align: bottom;
    position: relative;
    .drug-title {
      position: absolute;
      top: 0;
      left: 10px;
      width: 700px;
      overflow: hidden;
    }
  }
}
</style>

